<template>
  <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :cancleText="'关闭'"
    :buttons="buttons" @handleCancle="handleCancle" class="details_modal">
    <template v-slot:body>
      <div class="detailsBox">
        <span>文件名字：</span>
        <span>{{ detailData.resourceAlias }}</span>
      </div>
      <div class="detailsBox">
        <span>文件类型：</span>
        <span>{{ getTypeName(detailData.resourceType) }}</span>
      </div>
      <div class="detailsBox" v-if="detailData.resourceType === 2 || detailData.resourceType === 3">
        <span>时长：</span>
        <span>{{ getTime(detailData.resourceDuration) }}</span>
      </div>
      <div class="detailsBox" v-if="detailData.resourceType === 1">
        <span>分辨率：</span>
        <span>{{ detailData.resourceDimensions }}</span>
      </div>
      <div class="detailsBox" v-if="detailData.resourceType === 1">
        <span>宽度：</span>
        <span>{{ detailData.resourceDimensions.split('*')[0] || '' }}</span>
      </div>
      <div class="detailsBox" v-if="detailData.resourceType === 1">
        <span>高度：</span>
        <span>{{ detailData.resourceDimensions.split('*')[1] || '' }}</span>
      </div>
      <div class="detailsBox">
        <span>大小：</span>
        <span>{{ detailData.resourceSizeStr }}</span>
      </div>
      <div class="detailsBox">
        <span>创建日期：</span>
        <span>{{ detailData.createTime }}</span>
      </div>
      <div class="detailsBox">
        <span>创建人：</span>
        <span>{{ detailData.createUser }}</span>
      </div>
      <div class="detailsBox">
        <span>资源路径：</span>
        <span class="spanValue" @click="copyPath(detailData.resourceUrl)">{{ detailData.resourceUrl }}</span>
      </div>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import { scrollType, dataSourceType, configDataType } from "@/type";
import request from "@/api/index";
import copy from 'copy-to-clipboard';
import { message } from "ant-design-vue";
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: Object,
    default: {},
  },
});
let detailData = reactive<dataSourceType>(props.detailData)

const buttons = ref<dataSourceType[]>([]); //模态框button按钮个数和文案修改
//模态框数据
const modAlProps = reactive<dataSourceType>({
  width: "M",
  title: "详细信息",
});
const emits = defineEmits(["handleCancle"]);
const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};

//获取文件类型名称
const getTypeName = (type: number | any) => {
  let text = ''
  switch (type) {
    case 1:
      text = '图片类型'
      break;
    case 2:
      text = '视频类型'
      break;
    case 3:
      text = '音频类型'
      break;
    case 4:
      text = '附件类型'
      break;
    case 5:
      text = '文档类型'
      break;
    default: ''
      break;
  }
  return text
}

// 转换为式分秒
const getTime = (time: number) => {
  let h: number | string = parseInt((time / 60 / 60 % 24).toString())
  h = h < 10 ? '0' + h : h
  let m: number | string = parseInt((time / 60 % 60).toString())
  m = m < 10 ? '0' + m : m
  let s: number | string = parseInt((time % 60).toString())
  s = s < 10 ? '0' + s : s
  // 作为返回值返回
  return `${h}:${m}:${s}`
}
// 复制资源路径
const copyPath = (url: any) => {
  copy(url);
  message.success('资源路径复制成功！')
}

//onmounted
onMounted(async () => {

});
</script>

<style lang="scss" scoped>
.detailsBox {
  display: flex;

  span {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    line-height: 28px;
  }

  span:first-child {
    width: 70px;
    text-align: right;
  }

  span:last-child {
    width: 520px;
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .spanValue {
    cursor: pointer;
  }
}
</style>
